<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  :root {
    /* 每个竖条的高度 */
    --w: 10px;
    --gap: 20px;
  }

  .box {
    position: relative;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: calc(5 * var(--w) + 4 * var(--gap));
    height: calc(5 * var(--w) + 4 * var(--gap));
  }

  .line {
    width: var(--w);
    height: var(--w);
    display: block;
    background: pink;
    height: calc(20% * var(--h));
  }

  .dot {
    position: absolute;
    width: var(--w);
    height: var(--w);
    border-radius: 50%;
    background: pink;
    bottom: calc(20% * var(--h));
    left: 0;
    /* calc(var(--w) * -1) */
    /* animation: roll 4s infinite linear; */
    transform: translate(calc(var(--w) + var(--gap)), calc(40% * var(--h)));
    /* transform: translate(40px, -30px); */
    /* transform: translate(60px, -50px); */
    /* transform: translate(80px, -70px); */
    /* transform: translate(100px, -90px); */
  }

  @keyframes roll {
    0% {
      transform: translate(0, 0);
    }

    20% {
      transform: translate(20px, -20px)
    }

    40% {
      transform: translate(50px, -50px)
    }

    60% {
      transform: translate(70px, -70px)
    }

    80% {
      transform: translate(90px, -90px)
    }

    100% {
      transform: translate(110px, -110px)
    }
  }
</style>

<body>
  <div class="box">
    <span class="line" style="--h:1"></span>
    <span class="line" style="--h:2"></span>
    <span class="line" style="--h:3"></span>
    <span class="line" style="--h:4"></span>
    <span class="line" style="--h:5"></span>
    <span class="dot"></span>
  </div>
</body>

</html>